<template>
  <div class="MicCombinerbox">
    <div class="leftbox">
      <NocheckTree @handleNodeClicks="handleNodeClicks"></NocheckTree>
    </div>
    <div class="rightbox">
      <div class="littlexunhuan" ref="littlexunhuanss">
        <div v-if="!tableData.length" class="empty">
          <el-empty description="暂无数据"></el-empty>
        </div>
        <div
          class="littlebox"
          v-for="(item, index) in tableData"
          :key="index"
          style="padding: 20px !important"
        >
          <div class="intop">
            <div class="onebox">
              <div>
                <img
                  src="../../../../assets/Photovoltaic/huiliuxiang.png"
                  alt=""
                />
              </div>
            </div>
            <div class="forbox">
              <div>型号</div>
              <div>路数</div>
              <div>总电流</div>
            </div>
            <div class="twobox">
              <div>{{ item.model }}</div>
              <div>{{ item.count }}</div>
              <div>{{ item.totalCurrent?.toFixed(2) }}</div>
            </div>
            <div class="twreebox">
              <div></div>
              <div></div>
              <div>A</div>
            </div>
          </div>
          <div class="namebox muxian">
            <div class="onebox overfol">{{ item.name }}</div>
            <div class="forbox">母线电压</div>
            <div class="twobox">{{ item.busVoltage?.toFixed(2) }}</div>
            <div class="twreebox">V</div>
          </div>
          <div class="iconfontbox">
            <div>
              <i
                v-if="item.status == '2'"
                style="color: red"
                class="iconfont icon-lixian11"
              ></i>
              <i
                v-else-if="item.status == '3'"
                style="color: #f2bd42; font-size: 18px"
                class="iconfont icon-gaojing"
              ></i>
              <i
                v-else
                style="color: #1afa29"
                class="iconfont icon-zhengchang"
              ></i>
              <span>{{
                item.status == "1"
                  ? "在线"
                  : item.status == "2"
                  ? "离线"
                  : "告警"
              }}</span>
            </div>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="littlexunhuan">
        <el-table
          :data="tableData"
          size="medium"
          border
          :header-cell-style="{ 'text-align': 'center', background: '#f5f5f5' }"
          v-loading="loading"
          height="calc(100% - 1px)"
          style="width: 100%"
        >
          <template slot="empty">
            <el-empty description="暂无数据"></el-empty>
          </template>
          <el-table-column label="状态" align="center">
            <template #default="{ row }">
              <span>
                <i
                  v-if="row.status == '2'"
                  style="color: red"
                  class="iconfont icon-lixian11"
                ></i>
                <i
                  v-else-if="row.status == '3'"
                  style="color: #f2bd42; font-size: 18px"
                  class="iconfont icon-gaojing"
                ></i>
                <i
                  v-else
                  style="color: #1afa29"
                  class="iconfont icon-zhengchang"
                ></i>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="汇流箱名称"> </el-table-column>
          <el-table-column prop="model" label="型号"> </el-table-column>
          <el-table-column prop="count" label="路数"> </el-table-column>
          <el-table-column prop="busVoltage" label="母线电压(V)">
          </el-table-column>
          <el-table-column prop="totalCurrent" label="总电流(A)">
          </el-table-column>
          <el-table-column label="支路电流(A)">
            <el-table-column
              v-for="(item, index) in totalCount"
              align="right"
              :key="index"
              :prop="'zhilu' + (index + 1)"
              :label="'支路' + (index + 1)"
            >
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import NocheckTree from "../../Statistics/component/ClickTree.vue";
import request from "@/utils/request";
export default {
  name: "CallPoliceIndex",
  components: {
    NocheckTree,
  },
  data() {
    return {
      loading: false,
      tableData: [],
      totalCount: "",
    };
  },

  mounted() {},

  methods: {
    // 树节点点击
    async handleNodeClicks(val) {
      // if (val.className == 'EnergyStorageSystem' || val.className == 'EpowerSystem') {
      this.loading = true;
      const loading = this.$loading({
        lock: true,
        text: "loading",
        spinner: "el-icon-loading",
        target: this.$refs.littlexunhuanss,
      });
      const {
        data: { list, totalCount },
      } = await request.get(
        `mgd-microservice-biz/mgd/photovoltaic/monitor/combinerBox/getCombinerBoxList?classId=${val.id}`
      );
      list.forEach((ele) => {
        ele.currentList.map((item, index) => {
          ele["zhilu" + (index + 1)] = item;
        });
      });
      this.tableData = list;
      this.totalCount = totalCount;
      loading.close();
      this.loading = false;
    },
  },
};
</script>

<style scoped>
.MicCombinerbox {
  height: 100%;
  padding: 10px;
  display: flex;
  .leftbox {
    width: 300px;
    padding: 20px;
    height: 100%;
    background-color: #fff;
    margin-right: 10px;
  }
  .rightbox {
    width: calc(100% - 310px);
    background-color: #fff;
    height: 100%;
    padding: 20px;
    .littlexunhuan {
      height: 47.5%;
      overflow: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-content: flex-start;
      .empty {
        margin: 0 auto;
      }
      .littlebox {
        height: 160px;
        width: calc(25% - 10px);
        margin: 5px;
        border: 1px solid skyblue;
        border-radius: 5px;
        padding: 20px;
        .intop,
        .namebox {
          display: flex;
          .onebox {
            width: 35%;
          }
          .forbox {
            width: 25%;
            font-size: 14px;
            div {
              height: 33.33%;
              margin-bottom: 3px;
            }
          }
          .twobox {
            width: 30%;
            /* font-style: italic; */
            div {
              margin-bottom: 3px;
              height: 33.33%;
            }
          }
          .twreebox {
            width: 10%;
            font-size: 14px;
            div {
              margin-bottom: 3px;
              height: 33.33%;
            }
          }
        }
        .muxian {
          margin: 8px 0;
          .overfol {
            white-space: nowrap; /* 防止文字换行 */
            overflow: hidden; /* 超出部分隐藏 */
            text-overflow: ellipsis; /* 显示省略号 */
          }
        }
        .iconfontbox {
          display: flex;
          font-size: 14px;
          justify-content: center;
          .iconfont {
            margin-right: 5px;
          }
        }
      }
    }
  }
}
</style>
